<template>
  <div>
    <!--  商品列表  -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF; height: 50px;"><br>

      <div style="margin-left: 20px; margin-top: -15px">
        <el-row>
          <el-col :span="6">
            <span>输入搜索:&nbsp;&nbsp;</span>
            <el-input v-model="filters.names" placeholder="商品名称/商品型号" style="width: 200px;" />
          </el-col>

          <el-col :span="6">
            <span>商品分类: &nbsp;&nbsp;</span>
            <!-- <el-form-item v-model="filters.categoryName" placeholder="请选择商品类别"
              style="width: 200px; margin-left: 90px; margin-top: -25px;"> -->
            <!-- <el-cascader :options="options" :props="casconfig" clearable /> -->
            <el-tree-select style="width: 200px;" :props="casconfig" v-model="filters.code" clearable
              placeholder="请选择商品类别" :data="adstatusOptions" check-strictly :render-after-expand="false" />
            <!-- </el-form-item> -->
          </el-col>

          <el-col :span="4">
            <span>状态:&nbsp;&nbsp;</span>
            <el-select v-model="filters.isWarning" clearable placeholder="状态" style="width: 120px;">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-button class="css" @click="initData()">查询结果</el-button>
          </el-col>
        </el-row>
      </div>

    </div>

    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">商品列表</span>
        <!--工具条-->
        <div class="toolbar">
          <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE"
            @click="savePur()">新增商品</el-button>
          <el-button type="primary" size="small" @click="goodsExcel">导出</el-button>

          <el-upload style=" float: right; margin-left: 10px" v-model="data.contracts" :action="host +'/upload'"
            multiple :on-success="handleChange">
            <el-button type="primary" size="small">导入</el-button>
          </el-upload>


          <el-button type="primary" size="small" @click="enable" style="margin-left:10px">启用</el-button>
        </div>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe @selection-change="removeId">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="排序" width="100" header-align="center" align="center" />
      <el-table-column prop="name" label="商品名称" width="140" header-align="center" align="center" />
      <el-table-column prop="categoryCode" label="商品分类" width="120" header-align="center" align="center" />
      <el-table-column prop="spec" label="规格型号" width="120" header-align="center" align="center" />
      <el-table-column prop="unit" label="单位" width="120" header-align="center" align="center" />
      <el-table-column prop="pay" label="当前库存" width="120" header-align="center" align="center" />
      <el-table-column prop="num" label="期初数量" width="120" header-align="center" align="center" />
      <el-table-column prop="purchasePrice" label="单位成本" width="120" header-align="center" align="center" />
      <el-table-column prop="total" label="期初总价" width="120" header-align="center" align="center" />
      <el-table-column prop="priceCB" label="预计采购价" width="120" header-align="center" align="center" />
      <el-table-column prop="price" label="零售价" width="120" header-align="center" align="center" />
      <el-table-column prop="isWarning" label="状态" width="120" header-align="center" align="center">
        <template v-slot="o">
          <span v-if="o.row.isWarning == 1">不启用</span>
          <span v-if="o.row.isWarning == 2">已启用</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <span class="btn" @click="edit(row.id)">编辑</span>
          <span class="btn" @click="deletePur(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
    </div>
  </div>
</template>

<script setup>

import { ref, onMounted } from "vue";
import { queryTree, enableGoods, deleteGoods, getTree, goodsExport,importGoods } from "@/api/goods/list.jsx"
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import host from '@/utils/env.js'
import { getUser } from "@/utils/session";

const tableData = ref([])
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数


/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}

/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}

const statusOptions = [
  {
    value: '1',
    label: '不启用',
  },
  {
    value: '2',
    label: '已启用',
  }]

const adstatusOptions = ref([])

//配置选项
const casconfig = {
  "value": "code",
  "label": "name"
}


//条件
const filters = ref({
  code: "",
  isWarning: "",
  names: "",
  eid: getUser().eid
})



//查询类别树
async function queryCategory() {
  let res = await getTree();
  console.log(res);
  if (res.code == 200) {
    adstatusOptions.value = res.data;
    console.log(adstatusOptions.value);
  }
}


//新增路由跳转
const router = useRouter();
function savePur() {
  router.push({ path: "/goods/save" })
}

//查询商品列表
function initData() {
  if (filters.value.billDate == null) {
    filters.value.billDate = ""
  }
  let data = {
    "page": page.value,
    "pageSize": pageSize.value,
    "names": filters.value.names,
    "code": filters.value.code,
    "isWarning": filters.value.isWarning,
    "eid": filters.value.eid
  }
  queryTree(data)
    .then(res => {
      if (res.code == 200) {
        tableData.value = res.data.list
        page.value = res.data.page
        pageSize.value = res.data.pageSize
        total.value = res.data.total
      }
    })
}

//商品excel导出
async function goodsExcel() {
  let res = await goodsExport({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url)
  }
}

let data = ref({
   contracts: []
})

//商品excel导入
async function handleChange(res, uploadFile){
  let rs = await importGoods(data)
  if(rs.code == 200){
   //上传成功获取上传后的路径和附件名称
    let tmp = {};
    tmp.path = res.data;
    tmp.filename = uploadFile.name;
    purchaseForm.value.contracts.push(tmp);
  }
}

let rmData = []


//保存前端要启用的商品id
function removeId(ids) {
  let data = [];
  for (let i = 0; i < ids.length; i++) {
    data.push(ids[i].id)
  }
  rmData = data
}

function enable() {
  ElMessageBox.confirm(
    '确认要启用该商品吗？',
    '商品单启用确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {

      if (rmData.length == 0) {
        ElMessage({
          type: 'warning',
          message: '请选择要启用的商品',
        })
        return
      }
      let res = await enableGoods(rmData)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '启用成功',
        })
      }
    })
}

function deletePur(row) {
  ElMessageBox.confirm(
    '确认要删除该商品吗？',
    '商品单删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteGoods(row.id)
      initData()
    }).
    catch(() => { })
}


//编辑路由跳转
function edit(id) {
  router.push("/goods/revise/" + id)
}



onMounted(() => {
  initData();
  queryCategory()
})

</script>

<style scoped lang="scss">
.btn {
  color: #3399FF;
  margin-left: 10px;
  cursor: pointer;
}

.toolbar {
  float: right;
}
</style>
